<%@ page import="service.Login" %>
<%@ page import="java.util.HashMap" %>
<%@ page import="service.PersonService" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--利用Cookie技术实现免登录--%>
<%
    Cookie[] cookies=request.getCookies();
    HashMap<String,String> map=new HashMap<>();
    if(cookies!=null){
        for (Cookie c:cookies) {
            String name=c.getName();
            String value=c.getValue();
            map.put(name,value);
        }
        String identity=map.get("identity");
        String name=map.get("username");
        String pwd=map.get("password");
        if(identity!=null){
            //添加session
            HttpSession sessionWithOutLogin=request.getSession();
            sessionWithOutLogin.setAttribute("username",name);
            sessionWithOutLogin.setAttribute("password",pwd);
            sessionWithOutLogin.setAttribute("identity",identity);
            if(identity.equals("student")){
                boolean result=Login.validateStudent(name,pwd);
                if(result){
                    response.sendRedirect("self.jsp");
                }
            }else {
                boolean result=Login.validateTeacher(name,pwd);
                if(result){
                    response.sendRedirect("self.jsp");
                }
            }
        }
    }
%>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <title>登录注册</title>
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/login_reg.css">
    <script>

        // ajax
        function fun() {
            var user=document.getElementById("user").value;
            var pwd=document.getElementById("pwd").value;
            var ajax=new XMLHttpRequest();
            ajax.onreadystatechange=function () {
                if(ajax.status==200&&ajax.readyState==4){
                    var result=ajax.responseText;
                    if(result.indexOf("true")!==-1){
                        alert("注册成功！");
                        window.location.href="login.jsp";
                    }else {
                        alert("注册失败！用户名已经被占用。");
                    }
                }
            };
            var identities=document.getElementsByName("identity");
            var identity=identities[1].value;
            ajax.open("get","Register?user="+user+"&pwd="+pwd+"&identity="+identity);
            ajax.send(null);
        }

        function login() {
            var user=document.getElementById("account").value;
            var pwd=document.getElementById("user_pwd").value;
            var ajax=new XMLHttpRequest();
            ajax.onreadystatechange=function () {
                if(ajax.status==200&&ajax.readyState==4){
                    var result=ajax.responseText;
                    if(result.indexOf("true")!==-1){
                        window.location.href="self.jsp";
                    }else {
                        alert("登录失败，请检查用户名和密码是否输入正确！");
                    }
                }
            };
            var identities=document.getElementsByName("identity");
            var identity=identities[0].value;
            ajax.open("get","Login?user="+user+"&pwd="+pwd+"&identity="+identity);
            ajax.send(null);
        }
    </script>
</head>
<body>
    <!--头部-->
    <header class="top">
        <div class="w">
            <div class="top-left">
                <img src="images/Q-logo.png">
            </div>
            <div class="top-center">
                <input placeholder="搜索你感兴趣的课程" id="wd">
                <script>
                    function search() {
                        var wd=document.getElementById('wd');
                        window.location.href="search-result.jsp?wd="+wd.value;
                    }
                </script>
                <button class="iconfont" onclick="search()">&#xe63c;</button>
            </div>
            <div class="top-right">
                <ul>
                    <a href="index.jsp"><li>首页</li></a>
                    <li class="current">登录注册</li>
                    <li onclick="alert('请登录！')">个人主页</li>
                </ul>
            </div>
        </div>
    </header>

    <!--中部-->
    <section id="content">
            <!--头部-->
            <div class="content-header clearfix">
                <a href="javascript:;" class="current">我要登录</a>
                <a href="javascript:;">我要注册</a>
            </div>
            <!--内容-->
            <div class="content-body">
                <div class="dom" style="display: block;">
<%--                    <form action="Login">--%>
                        <div class="s1">
                            <h4>账号</h4>
                            <input id="account" name="user" type="text" placeholder="用户名/手机/邮箱">
                        </div>
                        <div class="s1">
                            <h4>密码</h4>
                            <input id="user_pwd" name="pwd" type="password" placeholder="请输入密码">
                        </div>
                        <div class="s1 opt log-opt">
                            <span>身份</span>
                            <select name="identity">
                                <option value="teacher" >老师</option>
                                <option value="student" >学生</option>
                            </select>
                        </div>
                        <div class="s2">
                            <input type="checkbox">
                            <span>记住密码</span>
                        </div>
                        <input type="submit" class="btn" value="登&nbsp;录" onclick="login()">
<%--                    </form>--%>
                </div>
                <div class="dom">
<%--                    <form action="Register">--%>
                        <div class="s1">
                            <h4>用户名</h4>
                            <input id="user" name="user" type="text" placeholder="中、英文均可, 最长20个字符或10个汉字">
                        </div>
                        <div class="s1">
                            <h4>密码</h4>
                            <input id="pwd" name="pwd" type="password" placeholder="6-30位英文、数字、符号, 区分大小写">
                        </div>
                        <div class="s1 opt">
                            <span>身份</span>
                            <select name="identity">
                                <option value="teacher" >老师</option>
                                <option value="student" >学生</option>
                            </select>
                        </div>
                        <input type="submit" class="btn" value="注&nbsp;册" onclick="fun()">
<%--                    </form>--%>
                </div>
            </div>
        </section>
    <script>
        window.onload = function () {
            // 1.1 获取需要的标签
            let as = document.getElementsByClassName('content-header')[0].getElementsByTagName('a');
            let contents = document.getElementsByClassName('dom');

            // 1.2 遍历
            for (let i = 0; i < as.length; i++) {
                // 1.2.1 取出单个对象
                let a = as[i];
                a.id = i;

                // 1.2.2 监听鼠标的移动事件
                a.onclick = function () {
                    // 让所有的a的class都清除
                    for (let j = 0; j < as.length; j++) {
                        as[j].className = '';
                        contents[j].style.display = 'none';
                    }

                    // 设置当前a的class
                    this.className = 'current';
                    // 从contents数组中取出对应的标签
                    contents[this.id].style.display = 'block';
                }

            }

            var user = $('user'),
                pwd = $('pwd'),
                account = $('account'),
                user_pwd = $('user_pwd');
            setCheck(user);
            setCheck(pwd);
            setCheck(account);
            setCheck(user_pwd);

            checkInput(user, /^[\u4E00-\u9FA5A-Za-z0-9_]+$/);
            checkInput(pwd, /^\w{6,30}$/);
            checkInput(account, /^[\u4E00-\u9FA5A-Za-z0-9_]+$/);
            checkInput(user_pwd, /^\w{6,30}$/);

            function checkInput(ele, reg){
                console.log(ele);
                ele.onblur = function () {
                    if(!reg.test(this.value)){
                        this.style.borderColor = '#ff0000';
                        this.check = false;
                    } else{
                        this.style.borderColor = '#cccccc';
                        this.check=true;
                    }
                }
            }

            function $(id) {
                return typeof id === "string" ? document.getElementById(id) : null;
            }

            function setCheck(ele){
                ele.check = true;
            }

            var submit = document.getElementById('submit');
            submit.onclick = function () {
                console.log(user, pwd);
                if(!(user.check&&pwd.check)){
                    alert('用户名或密码格式不正确！');
                }
                else if(user.value==''||pwd.value==''){
                    alert('用户名或密码为空！');
                }
                else alert('注册成功*^_^*')
            }

            var log = document.getElementById('log');
            log.onclick = function () {
                console.log(account, user_pwd);
                console.log(account.value);
                if(!(account.check&&user_pwd.check)){
                    alert('账号或密码格式不正确！');
                }
                if(account.value==''||user_pwd.value==''){
                    alert('账号或密码为空！');
                }
            }
        }

    </script>

    <!--尾部-->
    <footer>

    </footer>
</body>
</html>
